<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       window.onload=function(){
        // var list=document.getElementsByClassName("wrap")[0].childNodes;
        // console.log(list.length);
        // for(var a of list){
        //     console.log(a);
        // }
        // var parent=document.getElementsByClassName("wrap")[0];
        // console.log(parent.firstChild);//wrap
        // console.log(parent.firstChild.nextSibling);//header

      var content=document.getElementsByClassName("content")[0];
       var h3= document.createElement("h3");//创建了一个h3元素节点
       var titile=document.createAttribute("title");//创建title属性节点
        var text=document.createTextNode("测试文本");//创建一个文本节点
        h3.appendChild(text);//插入节点，在最后面插入
        h3.setAttributeNode(titile);
        titile.value="abc";
        document.getElementsByClassName("wrap")[0].insertBefore(h3,content);//插入节点，在前面插入
        // document.getElementsByClassName("wrap")[0].removeChild(h3);//移除
        // document.getElementsByClassName("wrap")[0].replaceChild(h3,content);//替换节点
        // 复制节点，true表示复制当前节点及子节点 false仅复制当前节点
    //     document.getElementsByClassName("wrap")[0].appendChild( content.cloneNode(true));
    //    h3.removeAttribute("title");//移除属性
    //    h3.setAttribute("style","color:red");
    //    console.log(h3.getAttribute("style"));

       }
    </script>
</head>
<body>
    <div class="wrap">
        <div class="header"></div>
            <div class="content"></div>
    </div>
</body>
</html>